@spectrum-web-components/icon
Advanced tools
**sp-icon** will allow you to render icons that have been supplied to the page via icon sets.
sp-icon will allow you to render icons that have been supplied to the page via icon sets.
<sp-icon name="ui:Magnifier"></sp-icon>
Icons are available in various sizes in Spectrum ranging from xxs to xxl, m being the default. We can specify the size via size attribute.
<sp-icon size="xxs" name="ui:Magnifier"></sp-icon>
<sp-icon size="xs" name="ui:Magnifier"></sp-icon>
<sp-icon size="s" name="ui:Magnifier"></sp-icon>
<sp-icon size="m" name="ui:Magnifier"></sp-icon>
<sp-icon size="l" name="ui:Magnifier"></sp-icon>
<sp-icon size="xl" name="ui:Magnifier"></sp-icon>
<sp-icon size="xxl" name="ui:Magnifier"></sp-icon>
Icons apply their color as currentColor so change the color property of the element for customization.
<sp-icon name="ui:Magnifier" style="color: red;"></sp-icon>
aria-hidden is set to true by default for Icons. The label attribute suppresses this and adds the label text as the aria-label of the icon.
<sp-icon name="ui:Magnifier" label="Magnify"></sp-icon>
FAQs
`<sp-icon>` renders an icon to the page. By default the `name` attribute will pair with separately registered icon sets to deliver the icons. When not present, `<sp-icon>` will subsequently check for its `src` attribute which could populate the icon via a
The npm package @spectrum-web-components/icon receives a total of 16,796 weekly downloads. As such, @spectrum-web-components/icon popularity was classified as popular.
We found that @spectrum-web-components/icon demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
Socket researchers have discovered malicious npm packages targeting crypto developers, stealing credentials and wallet data using spyware delivered through typosquats of popular cryptographic libraries.
Security News
Socket's package search now displays weekly downloads for npm packages, helping developers quickly assess popularity and make more informed decisions.
Security News
A Stanford study reveals 9.5% of engineers contribute almost nothing, costing tech $90B annually, with remote work fueling the rise of "ghost engineers."